<template>
    <!-- v-model:current-page="currentPage4" 当前页码 -->
    <!-- v-model:page-size="pageParams.rows" 条数 -->
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.rows"
        :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" background
        layout="total, sizes, prev, pager, next, jumper" :total=total @size-change="handleSizeChange"
        @current-change="handleCurrentChange" style="margin-top: 20px;">
    </el-pagination>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, onMounted, defineEmits } from 'vue'

const size = ref<ComponentSize>('default')
const disabled = ref(false)

// 接收父组件传过来的参数
const props = defineProps({
    total:{
        type:Number,
        default:0 //默认值
    },
    pageParams:{
        type:Object
    }
})

// 子传父 通过defineEmits给父组件传递数据
const emit = defineEmits(['sizeChange','currentChange'])

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    emit("sizeChange",val)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    emit("currentChange",val)
}
</script>